html, body {
    background: url(../images/title_bg.png) 50% 0 no-repeat, url(../images/bg_repeat.png) 50% 0 repeat-y #889ba7;
    margin: 0;
    font-family: 'Josefin Sans',arial,serif;
    color: #111,
}
#game {
    position:relative;
}
#page {
    width: 821px;
    min-height:800px;
    margin:0 auto;
    padding: 0;
    text-align:center;
    text-shadow: 0 1px 5px rgba(60,60,60,06);
}
header {
    height:88px;
    padding-top: 36px;
    margin-bottom:50px;
    font-family: "Rock Salt", Arial,sans-serif;
    font-size: 14px;
    text-shadow: 0 1px 0 rgba(200,200,200,.5)
    color： #121;
}

div {
    width: 50px;
    height: 72px;
    background-image:url("./images/sprite.jpg");
    animation: play 1s steps(10) infinite
}
@keyframes play {
    0% {
        background-position:0px 0;
    }
    100% {
        background-position:-500px 0;
    }
}
#layers {
    height: 440px;
    position: relative;
    margin: 0 auto;
    width: 768px;
    height:440px;

}
#layers canvas {
    left:50%;
    margin-left: -384px;
    position: absolute;
}

#guide {
    opacity: .7;
}

#guide .fadeout {
    opacity: 0;
    -webkit-transform: opacity .5s linear;
    transform:.5s linear;
}

#ui {
    -webkit-transform:opacity .3s linear;
    transform:.3s linear;
}

#ui .dim{
    opacity: .3;
}